<template>
  <div>
     <!-- 导航栏 -->
  <van-nav-bar title="新建优惠卷" >
  <template #left>
    <van-icon name="cross"  size="20"/>
  </template>
  <template #right>
    <i class="iconfont icon-nav_ico_menu_h"></i>
  </template>
</van-nav-bar>
<!-- form表单 -->
<div class="form">
  <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="优惠卷名称:"
    label-width="80"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />

    <div class="line">
      <label for="" class="yhj">优惠卷类型：</label>
    <select>
      <option value="" selected="selected">特价卷</option>
      <option value="">一折卷</option>
    </select>
    </div>

    <div class="line">
      <label for=""  class="yhj">有 效 期 ： </label>
        <input type="text" class="ipt"> <span class="wenzi">天</span>
    </div>

    <div class="line1 line">
      <label for=""  class="yhj shang">是否上线： </label>
        <div class="shangxian">
           <span class="fou">否</span>
            <span class="shi">是</span>
        </div>
    </div>


    <div class="line">
      <label for=""  class="yhj">市 场 价 ： </label>
        <input type="text" class="ipt"> <span class="wenzi">元</span>
    </div>


    <div class="line">
      <label for=""  class="yhj">优 惠 价  ： </label>
        <input type="text" class="ipt"> <span class="wenzi">元</span>
    </div>

    <div class="line upLoad">
      <label for=""  class="yhj">上传图片： </label>
       <div class="imgBox">
          <img src="../assets/iconfont/photo.jpg" alt="">
          <span>添加图片</span>
       </div>
       <div class="imgBox">
          <img src="../assets/iconfont/video.jpg" alt="">
          <span>上传视频</span>
       </div>
    </div>

    <van-field
    v-model="username"
    name="用户名"
    label="使用规则："
    label-width="70"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />

  <van-field
    v-model="username"
    name="用户名"
    label="使用说明："
    label-width="70"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />

  <van-field
    v-model="username"
    name="用户名"
    type="textarea"
    rows="3"
    autosize
    maxlength="100"
    label="使用规则："
    label-width="70"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />



    <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" >保存并提交</van-button>
  </div>
</van-form>
</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

.van-nav-bar{
  background-color: #101010;
 }

 .iconfont {
  color: white;
 }
 ::v-deep .van-nav-bar__title {
  color: white;
 }
 .form {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
 }
 ::v-deep .van-field__control {
  border: 1px solid #f2f2f2;
  border-radius: 7px;
  height: 40px;
  border: 2.5px solid #f2f2f2;
}
 ::v-deep .van-field__label {
  margin-top: 10px;
}
 ::v-deep .van-field__label {
  margin-right: 0;
}
.yhj{
  margin-left: 15px;
  font-size: 3.73333vw;
  color:  #646566;
}
select {
    border-radius: 1.86667vw;
    height: 40px;
    width: 220px;
    border: 0.66667vw solid #f2f2f2;
}
.ipt {

   width: 70px;
  border-radius: 7px;
  height: 30px;
  border: 2.5px solid #f2f2f2;
}
.line {
  margin-bottom: 10px;
}
.line1 {
  display: flex;
}
.wenzi {
  font-size: 12px;
}
.shang {
  margin-top: 10px;
}
.shangxian {
  width: 70px;
  height: 35px;
  border: 2.2px solid #fbbb9f;
  border-radius: 8px;
}
.fou {
  border-radius: 5px;
  color: #fde2d2;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  width: 40px;
  font-size: 12px;
  height: 100%;
  background-color: #fb8e51;
}
.shi {
  display: inline-block;
  width: 30px;
  height: 100%;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
}
.imgBox {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  border: 1px dotted #e8e8e8;
  border-radius: 5px;
  span {
    font-size: 12px;
    color: #6b6b6b;
  }
}
.upLoad {
  display: flex;
}
.van-button--block {
  width: 93%;
  margin-left: 15px;
  margin-top: 30px;
  background-image: linear-gradient(#f87d44,#fe9a5c);
  border-color: #fc8f53;
}
</style>